<template>
	<view class="Home">
		<view class="banner">
			<img class="banner-img" src="/static/tank_banner.png" alt="" />
		</view>
		
		<section class="operation-main-box">
			<view class="operation-main" @click="handle_route('TS')">
				<img src="/static/index/icon_ts.png" style="width: 75rpx;height: 75rpx" alt="" />
				<view class="operation-main-desc">
					堂食
				</view>
				<view class="operation-main-sub-desc">
					Dine In
				</view>
			</view>
			<view class="operation-main" @click="handle_route('WS')">
				<img src="/static/index/icon_ws.png" style="width: 75rpx;height: 75rpx" alt="" />
				<view class="operation-main-desc">
					外送
				</view>
				<view class="operation-main-sub-desc">
					Out Going
				</view>
			</view>
			<view class="operation-main" @click="handle_route('order')">
				<img src="/static/index/icon_orders.png" style="width: 75rpx;height: 75rpx" alt="" />
				<view class="operation-main-desc">
					订单
				</view>
				<view class="operation-main-sub-desc">
					My Order
				</view>
			</view>
		</section>
		
		<section class="vip-card">
			<view class="vip-card-left">
				<view class="vip-card-info">
					<view class="vip-card-info-title">
						VIP
					</view>
					<view class="vip-card-info-desc">
						￥0.00 
						<span class="vip-card-info-desc-span">|</span>
						积分0
						<span class="vip-card-info-desc-span">|</span>
						无权益
					</view>
				</view>
				<view class="vip-card-btn" @click="handle_route('charge')">
					充值
				</view>
			</view>
			
			<view class="vip-card-right">
				<img src="/static/index/icon_burger.png" style="width: 100%;height: 100%;" alt="" />
			</view>
		</section>
		
		<section class="operation-extra-box">
			<view class="operation-extra" @click="handle_hand_gift">
				<view class="operation-extra-desc">
					<view class="operation-extra-desc-title">
						邀请有礼
					</view>
					<view class="operation-extra-desc-sub-title">
						INVITE
					</view>
				</view>
				
				<img src="/static/index/icon_yq.png" class="operation-extra-img" alt="" />
			</view>
			
			<view class="operation-extra" @click="handle_store_navigation">
				<view class="operation-extra-desc">
					<view class="operation-extra-desc-title">
						门店导航
					</view>
					<view class="operation-extra-desc-sub-title">
						ADDRESS
					</view>
				</view>
				
				<img src="/static/index/icon_zb.png" style="width: 85rpx;height: 85rpx" class="operation-extra-img" alt="" />
			</view>
		</section>
		
		<AboutUs></AboutUs>
		
	</view>
	<tabBar></tabBar>
</template>

<script setup>
	import tabBar from "../components/tab_bar.vue"
	import AboutUs from "../components/about_us.vue"
	import { onMounted, ref } from "vue";
	import { save_user_info, get_vx_config } from "../common/api.js"
	
	onMounted(() => {
		login();
	})
	
	// 免登调起授权拿到用户信息存入本地
	const login = () => {
		uni.login({
			success (res) {
				console.log('login', res)
				// 通过uni.login获取到临时登录凭证code
				if (res.code) {
					//发起网络请求
					uni.request({
						url: 'https://api.weixin.qq.com/sns/jscode2session',
						data: {
							appid: get_vx_config().appid,
							secret: get_vx_config().secret,
							js_code: res.code, // wx.login登录code
							grant_type: 'authorization_code' // 固定赋值
						},
						success(res) {
							console.log("################3")
							console.log(get_vx_config().appid)
							console.log(res.data)
							uni.setStorageSync("openid", res.data.openid || "");
							uni.setStorageSync("session_key", res.data.session_key || "");
							// 拿到用户openid  添加用户入库
							save_user_info({
								user_id: res.data.openid
							})

						}
					})
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})

	}
	
	// 跳转页面
	const handle_route = (type) => {
		let url = ""
		switch(type){
			case "TS":
				url = "/pages/Tank/goods/index?type=TS"
				break;
			case "WS":
				url = "/pages/Tank/goods/index?type=WS"
				break;
			case "order":
				url = "/pages/Tank/orders/index"
				break;
			case "charge":
				url = "/pages/Tank/wallet/index"
				break;
			
		}
		
		uni.navigateTo({
			url: url
		})
		
	}
	
	// 邀请有礼
	const handle_hand_gift = () => {
		uni.showToast({
			title: '暂未开放, 敬请期待...',
			duration: 2000,
			icon: "none"
		});
	}
	
	// 门店导航
	const handle_store_navigation = () => {
		uni.navigateTo({
			url: "/pages/Tank/address/address_navigate",
			animationType: "pop-in",
			animationDuration: 300
		})
	}
	
</script>

<style lang="scss">
	.Home{
		width: 100%;
		height: 100vh;
		background-color: #d9d2bf;
		padding: 0 30rpx;
		box-sizing: border-box;
		
		.banner{
			width: 100%;
			// height: 400rpx;
			text-align: center;
			
			.banner-img{
				width: 100%;

				
			}
		}
		
		.operation-main-box{
			width: 100%;
			height: 250rpx;
			display: flex;;
			justify-content: space-between;
			
			.operation-main{
				width: calc((100% - 60rpx)/3);
				height: 100%;
				border-radius: 10rpx;
				background-color: #f3f1e4;
				padding: 40rpx 0;
				box-sizing: border-box;
				box-shadow: 0 0 15rpx 0rpx #999999;
				text-align: center;
				
				> img{width: 80rpx;}
				.operation-main-desc{width: 100%;height: fit-content;text-align: center;margin-top: 20rpx;letter-spacing: 2rpx;font-size: 33rpx;color: #333333;font-weight: 550;}
				.operation-main-sub-desc{width: 100%;height: fit-content;;font-size: 24rpx;color: #999999;text-align: center;margin-top: 5rpx;}
			}
		}
		
		.vip-card{
			width: 100%;
			height: 300rpx;
			background-color: #f3f1e4;
			border-radius: 10rpx;
			box-shadow: 0 0 15rpx 0rpx #999999;
			padding: 40rpx;
			margin-top: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.vip-card-right{
				width: 140rpx;
				height: 150rpx;
			}
			
			.vip-card-left{
				width: calc(100% - 220rpx);
				height: 100%;
				display: flex;;
				flex-direction: column;;
				justify-content: space-between;
				
				
				.vip-card-btn{
					width: fit-content;
					height: 60rpx;
					padding: 0 35rpx;
					border-radius: 60rpx;
					background-color: #333333;
					display: flex;;
					align-items: center;;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					
				}
				
				.vip-card-info{
					width: 100%;
					height: 110rpx;
					display: flex;;
					flex-direction: column;
					justify-content: space-between;
					
					.vip-card-info-title{
						width: 100%;
						height: fit-content;
						font-size: 45rpx;
						font-weight: 700;
						color: #333333;
					}
					
					.vip-card-info-desc{
						width: 100%;
						height: fit-content;;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
						.vip-card-info-desc-span{
							display: block;
							margin: 0 3px;
						}
						
					}
				}
				
				
			}
			
		}
		
		.operation-extra-box{
			width: 100%;
			height: 140rpx;
			display: flex;;
			justify-content: space-between;
			margin-top: 40rpx;
			
			.operation-extra{
				width: calc((100% - 20rpx)/2);
				height: 100%;
				background-color: #f3f1e4;
				border-radius: 10rpx;
				box-shadow: 0 0 15rpx 0rpx #999999;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				
				.operation-extra-desc{
					width: 140rpx;
					height: 75rpx;
					display: flex;;
					flex-direction: column;;
					justify-content: space-between;
					padding-left: 20rpx;
					margin-top: 10rpx;
					text-align: right;
					
					.operation-extra-desc-title{
						font-size: 26rpx;
						color: #333333;
						letter-spacing: 3px;
						font-weight: 550;
						
						
					}
					.operation-extra-desc-sub-title{
						font-size: 20rpx;
						color: #333333;
						font-style: italic;
						font-weight: 550;
						padding-right: 10rpx;
					}
				}
				
				.operation-extra-img{width: 100rpx;height: 100rpx;}
				
			}
			
		}
		
		
		
	}
	
</style>